<template>
  <div class="app">
    <!--    查询-->
    <el-form :inline="true" :model="usersearch" class="demo-form-inline">
      <el-form-item label="用户姓名">
        <el-input v-model="usersearch.username" placeholder="用户姓名"></el-input>
      </el-form-item>
      <el-form-item label="用户电话">
        <el-input v-model="usersearch.phone" placeholder="用户电话"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="plain"  @click="search">查询</el-button>
        <!--        <el-button type="success"  @click="add">添加</el-button>-->
        <!--        <el-button type="danger" @click="handleDelete">批量删除</el-button>-->
      </el-form-item>
    </el-form>
      <el-table
          :data="userList"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
        >
        </el-table-column>
        <el-table-column
            label="id"
            align="center"
            prop="id">
        </el-table-column>
        <el-table-column
            label="用户姓名"
            align="center"
            prop="username">
        </el-table-column>
        <el-table-column
            label="电话号码"
            align="center"
            prop="phone">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>
<script >

import userapi from "@/api/user"
import orderapi from "@/api/order";


export default {
  data(){
    return{
      userList: [],
      usersearch: {},
      page: 1,
      pageSize: 5,
      total: 100,


    }
  },

  created() {
    // this.finduser();
    // this.findByPage()
    this.search()

  },

  methods:{

    async finduser(){
      const {data:res}=await userapi.finduser()
      console.log(res)
      if(res.code === 200){
        this.userList=res.data;
      }

    },


    async findByPage(){
      const {data:res} = await userapi.findByPage(this.page,this.pageSize)
      console.log(res)
      if(res.code === 200){
        this.userList=res.data.rows
        this.total=res.data.total
      }
    },

    async search(){
      const {data:res} = await userapi.search(this.page,this.pageSize,this.usersearch)
      console.log(res)
      if (res.code === 200) {
        this.userList = res.data.rows
        this.total = res.data.total
      }

    },

    handleDelete(index,row){
      this.ids=[];
      if(row){
        this.ids.push(row.id)
      }else {
        this.ids = this.multipleSelection.map(m => m.id)
      }
      this.$confirm(`是否真的要删除学号为${this.ids}的学生吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let _this=this
        userapi.deleteuser(this.ids)
            .then(({data:res})=>{
              console.log("res:",res)
              if (res.code === 200) {
                this.$message({
                  type: 'success',
                  message: res.message,
                  onClose: () => {
                    // 重新加载数据
                    _this.search()
                  }
                })
              } else {
                this.$message({
                  type: 'error',
                  message: res.message
                })
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },


    handleSizeChange(val) {
      this.pageSize=val
      // this.findByPage()
      this.search()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page=val
      // this.findByPage()
      this.search()
      console.log(`当前页: ${val}`);
    },



    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection)
    },

  }
}

</script>

<style>

.el-pagination{
  margin-top: 20px;
  text-align: right;
}
</style>